{% extends "site_base.html" %}

{% load i18n %}

{% block extra_head_base %}
	{% block extra_head %}
  		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  		<!-- Place this tag in your head or just before your close body tag -->
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
		
  		<script type="text/javascript">
  			var huvi_ug;
			function over(alein){
				var x=document.getElementById(alein);
				x.setAttribute('style','opacity:0.5;');
			}
			function ever(alein){
				var x=document.getElementById(alein);
				x.setAttribute('style','opacity:1;');
			}

			$(document).ready(function() {
				
				slideShow();
				
			});
			
			function slideShow() {
			
				//Set the opacity of all images to 0
				$('#gallery #news_id').css({opacity: 0.0});
				
				//Get the first image and display it (set it to full opacity)
				$('#gallery #news_id:first').css({opacity: 1.0});
				
				//Set the caption background to semi-transparent
				$('#gallery .caption').css({opacity: 0.7});
			
				//Resize the width of the caption according to the image width
				$('#gallery .caption').css({width: $('#gallery #news_id').find('img').css('width')});
				
				//Get the caption of the first image from REL attribute and display it
				$('#gallery .content').html($('#gallery #news_id:first').find('p').attr('rel'))
				.animate({opacity: 0.7}, 400);
				
				$("#clickme").click(function(){
					gallery();
					});
				$("#noclick").click(function(){
					gallery2();
					});
			
			
				
			}
			
			function gallery() {
				
				//if no IMGs have the show class, grab the first image
				var current = ($('#gallery #news_id.show')?  $('#gallery #news_id.show') : $('#gallery #news_id:first'));
			
				//Get next image, if it reached the end of the slideshow, rotate it back to the first image
				var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery #news_id:first') :current.next()) : $('#gallery #news_id:first'));	
				
				//Get next image caption
				var caption = next.find('p').attr('rel');	
				
				//Set the fade in effect for the next image, show class has higher z-index
				next.css({opacity: 0.0})
				.addClass('show')
				.animate({opacity: 1.0}, 1000);
			
				//Hide the current image
				current.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				
				//Set the opacity to 0 and height to 1px
				$('#gallery .caption').animate({opacity: 0.7}, { queue:false, duration:0 }).animate({height: '50px'}, { queue:true, duration:300 });
				
				//Display the content
				$('#gallery .content').html(caption);
			}
			
			function gallery2() {
				var current = ($('#gallery #news_id.show')?  $('#gallery #news_id.show') : $('#gallery #news_id:first'));
				var prev = ((current.prev().length) ? ((current.prev().hasClass('caption'))? $('#gallery #news_id:last') :current.prev()) : $('#gallery #news_id:last'));	
				var caption = prev.find('p').attr('rel');	
				prev.css({opacity: 0.0})
				.addClass('show')
				.animate({opacity: 1.0}, 1000);
				current.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				$('#gallery .caption').animate({opacity: 0.7}, { queue:false, duration:0 }).animate({height: '50px'}, { queue:true, duration:300 });
				$('#gallery .content').html(caption);
			}
			
			function vote(value){
				$.post("/polls/{{latest_poll.id}}/vote/"+value, {
				},
				    function(data) {
				    	
				   		var s = document.getElementById("form");
				   		s.setAttribute("class","hide");
				   		var a = document.getElementById("result");
				   		a.setAttribute("class","show");
				   		var lamfo = a.getElementByTag("script");
				   		lamfo ="bodoh('dol{{choice.id}}','{{ choice.votes }}');	document.getElementById('huvi_gargah{{choice.id}}').innerHTML = '{{choice.choice}}';";
				   		
				    }
				);	
			}
			
			function bodoh(id,votes){
				huvi_ug =0;
				var niit_sanal = {{ total_vote }}
				if(niit_sanal>0){
					var heden_huvi = 2.9*(parseInt((100*votes)/niit_sanal));
					huvi_ug = parseInt((100*votes)/niit_sanal);
				}
				else{
					var heden_huvi=5;
				}
				
		   		var div_obj = document.getElementById(id);
		   		div_obj.setAttribute("style","width:"+heden_huvi+"px;background:url({{ STATIC_URL }}images/load.gif) repeat-x;");
		   		div_obj.setAttribute("height","10px");
		   		div_obj.setAttribute("title",""+huvi_ug+"%");
				}
		</script>

	  	<style type="text/css">
		  #gallery {
				position:relative;
				width:600px;
				height:360px;
				margin-top:15px;
			}
			#gallery #news_id {
				float:left;
				position:absolute;
			}
			
			#gallery #news_id img {
				border:none;
			}
			
			#gallery #news_id.show {
				z-index:500
			}
		
			#gallery .caption {
				z-index:600; 
				background-color:#000; 
				color:#ffffff; 
				height:50px;
				width:100%; 
				position:absolute;
				bottom:0;
			}
		
			#gallery .caption .content {
				margin:5px
			}
			
			#gallery .caption .content h3 {
				margin:0;
				padding:0;
				border:0;
				color:#1DCCEF;
			}
			#clickme{
				position: absolute;
				z-index:1000;
				margin-top:145px;
				margin-left:570px;
				right:0;
			}
			#noclick{
			left:0;
				position: absolute;
				z-index:1000;
				margin-top:145px;
			}
			.clickme a:visited{
				color: green;
				
			}
			#main a:hover{
				color: green;
				
			}
			#del_id{
				position:absolute;
				color:white;
				bottom:30px;
				right:10px;	
			}
			.false{
				opacity: 0.7;
			}
			.true{
				opacity:1;
			}
			.show{
				display:block;
			}
			.hide{
				display:none;
			}
			.p_tag{
				width:100%;
				margin:0;
				padding:0;
				border:0;
			}
	  	</style>
	{% endblock %}
{% endblock %}

{% block head_title %}
{% endblock %}

{% block body_class %}start{% endblock %}

{% block body %}

<div id="banner_container">
	{% if banner_top %}
		<center><div id="ehlel_bann">
		  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			  codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
			  id="name" width="728" height="90">
			  <param name="movie" value="../../site_media/media/{{banner_top}}">
			  <param name="quality" value="high">
			  <param name="wmode" value="transparent">
			  <embed name="name" src="../../site_media/media/{{banner_top}}"
				  quality="high" wmode="transparent" width="728" height="90"
				  type="application/x-shockwave-flash" 
				  pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
				  P1_Prod_Version=ShockwaveFlash">
			  </embed>
			</object>
			
		</div></center>
	{% endif %}
</div>

<div id="aguulga">
	<div id="aguulga_zuun">
		<div id="aguulga_slide">
			<div id="main" style="width:600px;  height:500px; padding:0; border:0;float:left;" class="containerjq">
     			<!-- jquery байрлуулах -->
   				<div id="gallery">
   				<a><img id="noclick" onMouseOver="over('noclick')" onMouseout="ever('noclick')" src="{{ STATIC_URL }}images/left_arrow.jpg"/></a>
   				<a><img id="clickme" onMouseOver="over('clickme')" onMouseout="ever('clickme')"src="{{ STATIC_URL }}images/right_arrow.jpg"/></a>
					{% for article in latest_articles %}
					
					{% if forloop.first %}
						<div id="news_id" class="show">
							<a href="/articles/{{article.id}}">
								<img src="../../site_media/media/{{article.photo}}" width="600" height="360" title="" alt=""/>
							</a>
							<p rel = "<h3>{{article.header}}</h3> <small>{{article.content|truncatewords:21}}</small><a id='del_id' class='del_news' href='/articles/{{article.id}}'>Дэлгэрэнгүй</a>"></p> 
						</div>
						{% else %}
							<div id="news_id">
								<a href="/articles/{{article.id}}">
									<img src="../../site_media/media/{{article.photo}}" width="600" height="360" title="" alt=""/>
								</a>
								<p rel="<h3>{{article.header}}</h3> {{article.content|truncatewords:21}}<a id='del_id' class='del_news' href='/articles/{{article.id}}'>Дэлгэрэнгүй</a>"></p> 
							</div>
						{% endif %}
					{% endfor %}		
					<div class="caption"><div class="content"></div></div>
				</div>
				
				{% for article in latest_articles_small %}
					{% if forloop.first %}
							<div id = "first_small_container">
									<div id = "small_pic">
										<a href="/articles/{{article.id}}">
											<img src="../../site_media/media/{{article.photo}}" width="140" height="100"/>
											<p id = "small_header">{{article.header}}</p>
										</a>
									</div>
							</div>
						{% else %}
							<div id = "small_container">
									<div id = "small_pic">
									<a href="/articles/{{article.id}}">
									<img src="../../site_media/media/{{article.photo}}" width="140" height="100"/>
									<p id = "small_header">{{article.header}}</p>
									</a>
									</div>
							</div>
					{% endif %}
				{% endfor %}
		<div id="aguulga_jijig">
			<div id="aguulga_jijig_zuun">
				<div id="vocabulary"  style="">
					<h3 style="text-align: left;">Vocabulary of the day</h3>
					<ul style="text-align: left;">
					{% if daily_word.english_word %}
						<p style="text-align: left;"> <div id = "ug">{{daily_word.english_word}} </div></p>
					{% else %}
						<p>Үг байхгүй байна.</p>
					{% endif %}
		
					{% if daily_word.mongolian_word %}
						<h4> <div id = "orchuulga">{{daily_word.mongolian_word}} </div> </h4>
					{% else %}
						<p>Орчуулга байхгүй байна.</p>
					{% endif %}
					</ul>
				</div>
		<!-- #POLL -->
				<div id="poll">
					<h3 style="text-align: left;">Санал асуулга</h3>
	
					{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
	
					{% if latest_poll or poll %}
						{% if latest_poll %}
						<div style="text-align: left;" id = "form" class="show">
						<h4 style="text-align: left;">{{ latest_poll.question }}</h4>
						{% csrf_token %}
						{% for choice in latest_poll.choice_set.all %}
							<input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" onClick="vote({{ choice.id }})"/>
							<label for="choice{{ forloop.counter }}">{{ choice.choice }}</label><br />
						{% endfor %}
	   					</div>
					{% endif %}
					<div id="result" class="hide">
					<h4 style="text-align: left;">{{ latest_poll.question }} <small style="color:red;">(таны саналыг тоолоогүй болно)</small></h4>
					 {% if latest_poll %}
						
						<ul style="text-align: left;">
						{% for choice in latest_poll.choice_set.all %}
							<li> <p class ="p_tag" id="huvi_gargah{{choice.id}}"/> <div width="294px"><img id="dol{{choice.id}}" src="{{ STATIC_URL }}images/load.gif" /></div></li>
							<script>
								bodoh('dol{{choice.id}}','{{ choice.votes }}');	
								document.getElementById('huvi_gargah{{choice.id}}').innerHTML = "{{choice.choice}} ("+huvi_ug+"%)" ;
							</script>
						{% endfor %}
						</ul>
	
					{% endif %}
					</div>
					{% else %}
						<p>Санал асуулга байхгүй байна.</p>
					{% endif %}
					
	
				</div><!-- #poll -->
			</div><!-- #aguulga_jijig_zuun -->
			<div id="aguulga_jijig_baruun">
				<div id="file">
					<h3>Файлын сан</h3>
	
					{% if latest_files %}
					
						{% for file in latest_files %}
						<li>
							<a href="/files/{{ file.id }}">{{ file.file_name }}</a>
							<p>{{ file.file_description|truncatewords:15|safe }}</p>
						</li>
						{% endfor %}
					
					{% else %}
						<p>Файл байхгүй байна.</p>
					{% endif %}
				</div>
			</div><!-- #aguulga_jijig_baruun -->
			
		</div><!-- #aguulga jijig -->
	</div>
	<div id="aguulga_baruun">
		<div id="right_side">
			<h3 id = "title1">Хамгийн их уншсан мэдээ</h3>

			{% if most_read_articles %}
				{% for article in most_read_articles %}
	        		<li >
	            		<div class="block">
	                		<a href="/articles/{{article.id}}"><h4>{{article.header}}</h4></a>
	                		<p>{{article.content|truncatewords:20|safe}}</p>
	                		<p id="not_justify"><small>Уншсан тоо: {{article.read_count}} | {{article.pub_date}} | <a class="del_news" href="/articles/{{article.id}}"> Дэлгэрэнгүй </a></small></p>
	            		</div>
	        		</li>
	    		{% endfor %}
   			{% else %}
   				<p>Мэдээ байхгүй байна</p>
   			{% endif %}
   			{% if banner_right_short %}
	    		<div id="Banner_Center">
					<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
					  codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
					  id="name" width="287" height="250">
					  <param name="movie" value="../../site_media/media/{{banner_right_short}}">
					  <param name="quality" value="high">
					  <param name="wmode" value="transparent">
					  <embed name="name" src="../../site_media/media/{{banner_right_short}}"
						  quality="high" wmode="transparent" width="287" height="250"
						  type="application/x-shockwave-flash" 
						  pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
						  P1_Prod_Version=ShockwaveFlash">
					  </embed>
					</object>
				</div>
			{% endif %}
	 
    
    		<h3 id = "title2">Хамгийн их сэтгэгдэлтэй мэдээ</h3>
	
			{% if most_commented_articles %}
				{% for article in most_commented_articles %}
	        		<li size="2">
	            		<div class="block">
	               			<a href="/articles/{{article.id}}"><h4>{{article.header}}</h4></a>
	                		<p>{{article.content|truncatewords:20|safe}}<p>
	                		<p id="not_justify"><small>Сэтгэгдлийн тоо: {{article.comment_count}} | {{article.pub_date}} | <a class="del_news" href="/articles/{{article.id}}">Дэлгэрэнгүй </a></small></p>
	            		</div>
	        		</li>
	    		{% endfor %}
			{% else %}
				<p>Мэдээ байхгүй байна</p>
			{% endif %}
   
		</div>
	</div>
</div>

</div>
</div>
<div id="ehlel_dood_bann">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		  codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
		  id="name" width="728" height="90">
		  <param name="movie" value="../../site_media/media/{{banner_bottom}}">
		  <param name="quality" value="high">
		  <param name="wmode" value="transparent">
		  <embed name="name" src="../../site_media/media/{{banner_bottom}}"
			  quality="high" wmode="transparent" width="728" height="90"
			  type="application/x-shockwave-flash" 
			  pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
			  P1_Prod_Version=ShockwaveFlash">
		  </embed>
		</object>
</div>
<!-- 
<div id="ehlel_doodbann">
 <img border="0" src="{{ STATIC_URL }}" width="728" height="90" />
</div>
 -->
{% endblock %}



